import { Form, Spin, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import Cls from 'classnames';
import pageStyles from '@/common/pageLayout.less';

import { connect, history } from 'umi';

import { TableBody } from '../../PurchaseGateway/mview/HomeContract/mview/HomeTable/mviewTable/TableBody';
import { taskPushService } from '../../PurchaseGateway/mview/HomeContract/mview/HomeTable/services';

const PurchaseTask = () => {
  const styleFixCls = 'purchase-homesty';

  /** 存入选中的tab标识 */
  const [tabPaneKey, setTabPaneKey] = useState<string>((history.location.state as any)?.tabPaneKey || '0');

  /** 表格数据 */
  const [listData, setListData] = useState([]);

  /**获取全部数据 */
  const { taskPushRun, taskPushLoading, taskPushPagination } = taskPushService((res) => {
    if (res?.msgFlag && res?.rows?.length > 0) {
      const tempMap = res?.rows?.map((item) => {
        return {
          ...item,
          currentStage: item?.nodeName, //当前环节， nodeName为react关键字不能使用！！！
        };
      });
      setListData(tempMap);
    } else {
      setListData([]);
    }
  });

  /** 重载数据 */
  const reloadListData = (params) => {
    taskPushRun(params);
  };

  /** 初始化 */
  useEffect(() => {
    taskPushRun({
      isRemark: Number(tabPaneKey),
      current: 1,
      pageSize: 10,
    });
  }, [tabPaneKey]);

  // 搜索表单
  const [searchForm] = Form.useForm();

  /** 返回子组件 */
  const renderTabsPane = () => {
    return (
      <TableBody
        taskPushPagination={taskPushPagination}
        tabPaneKey={tabPaneKey}
        listData={listData}
        styleFixCls={styleFixCls}
        searchForm={searchForm}
        isTaskView={true}
        reloadListData={reloadListData}
      />
    );
  };

  return (
    <div className={Cls(`${styleFixCls}`, pageStyles['commonTabsLine'])}>
      <Spin spinning={taskPushLoading}>
        <Tabs
          activeKey={tabPaneKey}
          items={[
            {
              label: '待办',
              key: '0',
              children: renderTabsPane(),
            },
            {
              label: '已办',
              key: '2',
              children: renderTabsPane(),
            },
          ]}
          onChange={(activeKey: string) => {
            setTabPaneKey(activeKey);
          }}
        />
      </Spin>
    </div>
  );
};
export default connect(({ baseLogin }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
}))(PurchaseTask);
